<!--
 * @Description: 文章详情页
 * @Author: Huang Junjie
 * @Date: 2021-04-29 16:31:57
 * @LastEditTime: 2021-07-08 15:20:25
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div>
    <!-- 背景图 -->
    <div
      id="background"
      :style="`background-image: url(${require('@/assets/images/jjxt/ywzt/ywzt-index-background.png')})`"
    />
    <!-- 背景图 -->

    <!-- 顶部导航栏 -->
    <top-navigation-bar />
    <!-- 顶部导航栏 -->

    <el-scrollbar>
      <!-- 主要内容 -->
      <div class="content">
        <div v-show="acticleFontSizeType === 'big'" class="title title-text-big">{{ acticleDetailInfo.title }}</div>
        <div v-show="acticleFontSizeType === 'middle'" class="title title-text-middle">{{ acticleDetailInfo.title }}</div>
        <div v-show="acticleFontSizeType === 'small'" class="title title-text-small">{{ acticleDetailInfo.title }}</div>
        <div class="subtitle">
          <el-row>
            <el-col :span="12">
              <span v-show="acticleFontSizeType === 'big'" class="rich-text-big">{{ acticleDetailInfo.createDatetime ? getDatatimeChinese(new Date(acticleDetailInfo.createDatetime), 0, 11) : '' }}</span>
              <span v-show="acticleFontSizeType === 'middle'" class="rich-text-middle">{{ acticleDetailInfo.createDatetime ? getDatatimeChinese(new Date(acticleDetailInfo.createDatetime), 0, 11) : '' }}</span>
              <span v-show="acticleFontSizeType === 'small'" class="rich-text-small">{{ acticleDetailInfo.createDatetime ? getDatatimeChinese(new Date(acticleDetailInfo.createDatetime), 0, 11) : '' }}</span>
            </el-col>
            <el-col class="subtitle-right" :span="12">
              <span>
                【字体：
                <a :class="acticleFontSizeType === 'big' ? 'rich-text-big' : ''" @click="changeActicleFontSizeType('big')">大</a>
                <a :class="acticleFontSizeType === 'middle' ? 'rich-text-middle' : ''" @click="changeActicleFontSizeType('middle')">中</a>
                <a :class="acticleFontSizeType === 'small' ? 'rich-text-small' : ''" @click="changeActicleFontSizeType('small')">小</a>
                】
              </span>
            </el-col>
          </el-row>
        </div>
        <hr>
        <div v-show="acticleFontSizeType === 'big'" class="rich-text rich-text-big" v-html="acticleDetailInfo.content" />
        <div v-show="acticleFontSizeType === 'middle'" class="rich-text rich-text-middle" v-html="acticleDetailInfo.content" />
        <div v-show="acticleFontSizeType === 'small'" class="rich-text rich-text-small" v-html="acticleDetailInfo.content" />
        <div
          v-if="acticleDetailInfo.imagesList.length !== 0"
          class="file-list"
        >
          <div v-show="acticleFontSizeType === 'big'" class="rich-text-big">附件：</div>
          <div v-show="acticleFontSizeType === 'middle'" class="rich-text-middle">附件：</div>
          <div v-show="acticleFontSizeType === 'small'" class="rich-text-small">附件：</div>
          <div
            v-for="(item, index) in acticleDetailInfo.imagesList"
            :key="`a${index}`"
          >
            <download :params="{url: item.filePath, fileName: item.fileName, fileExt: item.fileExtname}">
              <a v-show="acticleFontSizeType === 'big'" class="file-link rich-text-big"> {{ item.fileName }}</a>
              <a v-show="acticleFontSizeType === 'middle'" class="file-link rich-text-middle"> {{ item.fileName }}</a>
              <a v-show="acticleFontSizeType === 'small'" class="file-link rich-text-small"> {{ item.fileName }}</a>
            </download>
          </div>
        </div>
      </div>
      <!-- 主要内容 -->
    </el-scrollbar>
  </div>
</template>

<script>
import { getActicleDetailInfo, getUnloginActicleDetailInfo } from '@/api/jjxt/article-detail-view';
import { getDatatimeChinese } from '@/utils';
import { getToken } from '@/utils/auth';
import { getStore, setStore } from '@/utils/storage';
import TopNavigationBar from '@/views/jjxt/components/TopNavigationBar';
import Download from '@/views/jjxt/components/Download';

export default {
  name: 'ArticleDetailView',
  components: {
    TopNavigationBar,
    Download
  },
  data() {
    return {
      // 文章内容字体大小，big、middle、small
      acticleFontSizeType: !getStore('acticleFontSizeType') ? 'middle' : getStore('acticleFontSizeType'),

      // base路径
      vueAppBaseApi: process.env.VUE_APP_BASE_API,

      // 文章详情信息
      acticleDetailInfo: {
        articleType: '',
        content: '',
        contentByte: '',
        createDatetime: '',
        id: '',
        imagesList: [],
        intro: '',
        itemName: '',
        keyword: '',
        title: '',
        uploadDeptCode: '',
        uploadName: ''
      }
    };
  },
  mounted() {
    this.getActicleDetailInfo(); // 获取文章详情信息
  },
  methods: {
    getDatatimeChinese,
    getToken,

    // 获取文章详情信息
    getActicleDetailInfo() {
      if (this.$route.query.viewRange === 'All') {
        getUnloginActicleDetailInfo({ id: this.$route.query.id }).then(res => {
          this.acticleDetailInfo = res.data;
        });
      } else if (this.$route.query.viewRange === 'Login') {
        getActicleDetailInfo({ id: this.$route.query.id }).then(res => {
          this.acticleDetailInfo = res.data;
        });
      }
    },

    // 更改文章内容字体大小
    changeActicleFontSizeType(type) {
      this.acticleFontSizeType = type;
      setStore('acticleFontSizeType', type);
    }
  }
};
</script>

<style lang="scss" scoped>
#background {
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.el-scrollbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 68px;
  bottom: 0;
  background-color: #ffffff;
  ::v-deep .el-scrollbar__view {
    overflow-x: hidden;
  }
}

.content {
  background-color: #ffffff;
  padding: 0 100px 20px 100px;
  .title {
    padding: 50px 0 20px 0;
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    &-text-big {
      font-size: 32px;
    }
    &-text-middle {
      font-size: 28px;
    }
    &-text-small {
      font-size: 24px;
    }
  }
  .subtitle {
    font-size: 16px;
    &-right {
      text-align: right;
      &-big {
        font-size: 24px;
      }
      &-middle {
        font-size: 20px;
      }
      &-small {
        font-size: 16px;
      }
    }
  }
  .file-list {
    font-size: 16px;
    line-height: 30px;
    .file-link {
      color: royalblue;
    }
    .file-link:hover {
      text-decoration: underline;
    }
  }
  .rich-text {
    padding: 20px 0 20px 0;
    &-big {
      font-size: 28px;
    }
    &-middle {
      font-size: 24px;
    }
    &-small {
      font-size: 20px;
    }
  }
}
</style>
